<template>
	<view>
		<Header title="云上坚果" colorRight="white" colorLeft="white" nameLeft="arrow-left" nameRight="plus" class="header"></Header>
		
		<view class="main_wrap">
			<view class="main">
				<view class="main_search">
					<van-search :value="value" input-align="center" placeholder="搜索" />
				</view>
				<view class="main_nav">
					<van-tabs :active="active" title-active-color="#1684fc" @change="onChange" animated color="#1684fc" :swipeable="true">
					  <van-tab title="最新资讯" >
						  <view class="card_wrap">
							  <view class="card " v-for="item in 5">
								 <text class="one_tit">1号标题</text>
								 <text class="desc fs24">由各种物质组成的巨型球状天体,叫做星球。有一定的形状，有自己的运行轨道。</text>
								 <text class="time fs24 cbbb">2021-8-15</text>
								 <text class="user fs24 cbbb">xxx用户</text>
								 <text class="fs24 cbbb">种植技术</text>
							  </view>
						  </view>
					  </van-tab>
					  <van-tab title="种植技术">
						  <view class="card_wrap">
						  							  <view class="card " v-for="item in 5">
						  								 <text class="one_tit">1号标题</text>
						  								 <text class="desc fs24">由各种物质组成的巨型球状天体,叫做星球。有一定的形状，有自己的运行轨道。</text>
						  								 <text class="time fs24 cbbb">2021-8-15</text>
						  								 <text class="user fs24 cbbb">xxx用户</text>
						  								 <text class="fs24 cbbb">种植技术</text>
						  							  </view>
						  </view>
					  </van-tab>
					  <van-tab title="专家推荐">
						  <view class="card_wrap">
						  							  <view class="card " v-for="item in 5">
						  								 <text class="one_tit">1号标题</text>
						  								 <text class="desc fs24">由各种物质组成的巨型球状天体,叫做星球。有一定的形状，有自己的运行轨道。</text>
						  								 <text class="time fs24 cbbb">2021-8-15</text>
						  								 <text class="user fs24 cbbb">xxx用户</text>
						  								 <text class="fs24 cbbb">种植技术</text>
						  							  </view>
						  </view>
					  </van-tab>
					  <van-tab title="政策公告">
						  <view class="card_wrap">
						  							  <view class="card " v-for="item in 5">
						  								 <text class="one_tit">1号标题</text>
						  								 <text class="desc fs24">由各种物质组成的巨型球状天体,叫做星球。有一定的形状，有自己的运行轨道。</text>
						  								 <text class="time fs24 cbbb">2021-8-15</text>
						  								 <text class="user fs24 cbbb">xxx用户</text>
						  								 <text class="fs24 cbbb">种植技术</text>
						  							  </view>
						  </view>
					  </van-tab>
					</van-tabs>
				</view>
			</view>
		</view>
			
		
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	
	export default {
		data() {
			return {
				value:'',
				active:0
			}
		},
		components: {
			Header,
			
		},
		methods: {
			onChange(event){
				 wx.showToast({
				      title: `切换到标签 ${event.detail.name}`,
				      icon: 'none',
				    });
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .van-nav-bar__content{
		background-color: #22292c !important;
		
	}
	
	body{
		background: #f8f8f8;
	}
	
	.main_wrap{
		.main{
			.main_search{
				// border: 1px solid red;
				
				/deep/ .van-search__content{
					border-radius: 6rpx !important;
					border: 1px solid #bbbbbb !important;
				}
			}
			.main_nav{
				.card_wrap{
					
					margin: 44rpx 24rpx;
					// box-sizing: border-box;
					margin-bottom: 28rpx;
					.card{
						// height: 255rpx;
						padding-top: 36rpx;
						padding-left: 34rpx;
						padding-bottom: 40rpx;
						padding-right: 34rpx;
						border: 1px solid #bbbbbb;
						margin-bottom: 22rpx;
						
						&:last-child{
							margin-bottom: 0;
						}
						.one_tit{
							font-size: 32rpx;
							color: #000000;
							font-weight: bold;
							margin-bottom: 24rpx;
							display: block;
						}
						.desc{
							font-size: 24rpx;
							color: red;
							line-height: 36rpx;
							display: block;
							margin-bottom: 32rpx;
						}
						.time{
							margin-right: 16rpx;
						}
						.user{
							margin-right: 21rpx;
							border-right: 1px solid #bbbbbb;
							padding-right: 21rpx;
						}
					}
				}
			}
		}
	}
	
	
	
	.pl20{
		padding-left: 20rpx;
	}
	
	.pb40{
		padding-bottom: 40rpx;
	}
	
	.pr20{
		padding-right: 20rpx;
	}
	
	.pt20{
		padding-top: 20rpx !important;
	}
	
	
	
</style>
